<template>
  <div class="detail" ref="CarOrderDetail">
    <div class="detail_top">
      <van-nav-bar
        right-text="刷新"
        fixed
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #left>
          <van-icon name="arrow-left" color="#fff" size="16" />
        </template>
        <template #title>
          <div class="detail_top_title">
            订单详情 - <template v-if="detail.is_because">{{
              detail.is_because == "1" ? "因公" : "因私"
            }}</template>
          </div>
        </template>
        <template #right>
          <div class="detail_top_agin">刷新</div>
        </template>
      </van-nav-bar>
    </div>
    <div class="detail_detail">
      <div class="_detail_left">
        <div class="_detail_left_div">
          <span>订单编号：</span>
          <span id="sourceTxt">{{ detail.order_id }}</span>
          <textarea
            id="copyTxt"
            cols="30"
            rows="10"
            :disabled="true"
          ></textarea>
          <!-- v-if="detail.order_id" -->
          <span class="_detail_left_img" @click="CV" v-if="detail.order_id"
            ><img :src="ctrl_c" alt=""
          /></span>
        </div>
        <div v-if="detail.apply_no">审批单号：{{ detail.apply_no }}</div>
        <div>预订人：{{ detail.book_name }}</div>
        <div>预订时间：{{ detail.book_time }}</div>
        <div v-if="enums[detail.amap_order_status]">
          订单状态：{{ enums[detail.amap_order_status] }}
        </div>
      </div>
      <div class="_detail_right">
        <img :src="wait_pay" alt="" v-if="detail.order_status == 2" />
        <img :src="img_close" alt="" v-else-if="detail.order_status == 5" />
        <img :src="car_quit" alt="" v-else-if="detail.order_status == 6" />
        <img :src="img_wancheng" alt="" v-else-if="detail.order_status == 1" />
        <img :src="yuyue_ok" alt="" v-else-if="detail.order_status == 4" />
        <img :src="yuyue_wait" alt="" v-else-if="detail.order_status == 3" />
      </div>
    </div>
    <div class="detail_card">
      <div class="_card_card">
        <div class="content">
          <div class="top">
            <div class="top_1">
              {{
                detail.order_service_type == 1
                  ? "实时单"
                  : detail.order_service_type == 2
                  ? "预约单"
                  : detail.order_service_type == 3
                  ? "接机"
                  : detail.order_service_type == 4
                  ? "送机"
                  : ""
              }}
            </div>
            <div class="top_2">{{ detail.depart_city }}</div>
            <div class="top_3">{{ detail.cp_name }}</div>
            <div class="top_3" v-show="car_info.car_info">
              （{{ car_info.car_info }}）
            </div>
          </div>
          <div class="midle">
            <div class="midle_2">
              <div class="midle_2_l">
                <div class="midle_2_l_c"></div>
              </div>
              <div>{{ detail.depart_place }}</div>
            </div>
            <div class="midle_line"></div>
            <div class="midle_3">
              <div class="midle_3_l">
                <div class="midle_3_l_c"></div>
              </div>
              <div>{{ detail.arrive_place }}</div>
            </div>
            <div class="midle_1">
              <div class="midle_1_l"><van-icon name="clock" /></div>
              <div>{{ detail.depart_time }}用车</div>
            </div>
          </div>
          <div class="midle_time_kilometre">
            <p>全程{{ detail.total_mileage }}公里</p>
            <p class="midle_time_">用时{{ detail.total_time }}分钟</p>
          </div>
        </div>
        <!-- <div class="foot">
          <div class="foot_flight">
            <div class="foot_flight_l"><van-icon name="clock" /></div>
            <div>航班抵达后免费等待1小时</div>
          </div>
          <div class="foot_tips">
            <div class="foot_tips_l">
              退改
            </div>
            <p class="foot_tips_r">
              2021-11-11 13:50可免费取消，超时将收取订单100%费用
            </p>
          </div>
        </div> -->
      </div>
    </div>
    <!--    <div class="detail_approve" @click="onApproveRight">-->
    <!--      <van-nav-bar left-text="查看审批进度">-->
    <!--        <template #right>-->
    <!--          <van-icon name="arrow" color="#208CFF" size="14" />-->
    <!--        </template>-->
    <!--      </van-nav-bar>-->
    <!--    </div>-->
    <div class="detail_car_diver">
      <template v-if="detail.order_status != 3">
        <div class="detail_car_diver_l"><img :src="img_driver" alt="" /></div>
        <div class="detail_car_diver_c">
          <div class="_diver_c_up">
            {{ car_info.cp_name }}-{{ car_info.driver_name }}
          </div>
          <div class="_diver_c_down">
            <div class="_c_down_l">{{ car_info.car_number }}</div>
            <!--            <div class="_c_down_r">{{ car_info.car_info }}</div>-->
          </div>
        </div>
      </template>
      <div
        class="detail_car_diver_r"
        @click="search_travel"
      >
        <!--        v-if="detail.show_travel_dynamics"-->
        查看行程动态
      </div>
    </div>
    <div class="detail_taker">
      <div class="detail_taker_detail">
        <p>
          <span class="_taker_detail_p1">{{ passenger_info.name }}</span
          ><span class="_taker_detail_p2">{{
            passenger_info.department_name
          }}</span>
        </p>
        <p>
          <span>手机号：</span><span>{{ passenger_info.phone }}</span>
        </p>
        <p v-if="userConfig.car_cost_center != '2'">
          <span>成本中心：</span><span>{{ passenger_info.costcent_name }}</span>
        </p>
      </div>
      <!--      因公才有这些东西-->
      <div class="detail_taker_proj" v-if="detail.is_because == '1'">
        <div class="_taker_proj_1" v-if="userConfig.car_project != '2'">
          <span>项目</span
          ><span class="right_color">{{ detail.project_name }}</span>
        </div>
        <div class="_taker_proj_2" v-if="userConfig.car_travel_matter != '2'">
          <span>差旅事项</span
          ><span class="right_color">{{ detail.travel_remark }}</span>
        </div>
        <div class="_taker_proj_3" v-if="detail.overproof == '1'">
          <span>超标原因：</span
          ><span class="right_color">{{ detail.exceed_msg }}</span>
        </div>
      </div>
    </div>
    <div class="detail_linkman">
      <div class="_linkman_1">
        <span>联系人 </span
        ><span class="right_color">{{ detail.link_name }}</span>
      </div>
      <div class="_linkman_2">
        <span>手机号</span
        ><span class="right_color">{{ detail.link_phone }}</span>
      </div>
    </div>
    <div class="detail_payType detail_linkman">
      <div class="_linkman_1">
        <span>支付方式 </span
        ><span class="right_color">{{
          detail.pay_type == 1 || detail.pay_type == 27
            ? "支付宝"
            : detail.pay_type == 4 || detail.pay_type == 28
            ? "微信"
            : detail.pay_type == 5 || detail.pay_type == 29
            ? "月结"
            : detail.pay_type == 10 || detail.pay_type == 26
            ? "在线支付"
            : detail.pay_type == 50
            ? "高德结算"
            : "未支付"
        }}</span>
      </div>
      <div class="_linkman_2">
        <span>实际支付</span
        ><span class="right_color">￥{{ detail.actual_pay_price }}</span>
      </div>
    </div>

    <div class="footer_nav">
      <div class="footer_nav_l">
        <span class="_nav_l_symbol">￥</span>
        <span class="_nav_l_price">{{ detail.order_price }}</span>
        <span class="_nav_l_search" @click="search_detail">查看明细</span>
      </div>
      <div class="footer_nav_r">
        <div
          class="_nav_r_order"
          @click="close_order"
          v-if="
            detail.amap_order_status == 4 ||
              detail.amap_order_status == 7 ||
              detail.amap_order_status == 8
          "
        >
          取消订单
        </div>
        <div
          class="_nav_r_call"
          @click="call_phone"
          v-if="detail.amap_order_status == 7 || detail.amap_order_status == 8"
        >
          打电话
        </div>
        <div
          class="_nav_r_call"
          @click="pay_price"
          v-if="detail.amap_order_status == 3 || detail.amap_order_status == 5"
        >
          支付
        </div>
      </div>
    </div>
    <!-- 查看明细 -->
    <div class="show_price">
      <van-popup
        v-model:show="show_price"
        @close="close_search_detail"
        closeable
        round
        position="bottom"
        :style="{ height: '33%' }"
      >
        <div class="contents">
          <div class="contents_title"><span>费用明细</span></div>
          <div
            class="contents_price"
            v-if="detail.fee_info_list && detail.fee_info_list.length"
          >
            <!-- <div class="contents_price1">
              <div class="_price1_up">
                <span class="_price1_up_l">起步价：</span
                ><span>￥{{ detail.start_price }}</span>
              </div>
              <div class="_price1_down">含时长300分钟，含里程300公里</div>
            </div>
            <div class="contents_price2">
              <div class="_price1_up">
                <span class="_price1_up_l">里程费：</span><span>￥700</span>
              </div>
              <div class="_price1_down">起步里程（300公里）</div>
            </div> -->
            <div
              class="contents_price3"
              v-for="(item, index) in detail.fee_info_list"
              :key="index"
            >
              <div class="_price1_up">
                <span class="_price1_up_l">{{ item.fee_title }}</span
                ><span>￥{{ item.fee_value }}</span>
              </div>
            </div>
          </div>
          <template v-else
            ><van-empty image-size="3.4rem" description="暂无费用明细"
          /></template>
          <!-- <div class="contents_show_price">
            <div class="footer_nav_l">
              <span class="_nav_l_symbol">￥</span>
              <span class="_nav_l_price">{{ detail.actual_pay_price }}</span>
            </div>
            <div class="footer_nav_r">
              <div class="_nav_r_order" @click="search_detail">查看明细</div>
            </div>
          </div> -->
        </div>
      </van-popup>
    </div>
    <!-- 取消订单选择原因 -->

    <div class="close_order">
      <van-popup v-model:show="popup_show" round>
        <div class="close_order_contents">
          <div class="close_title">选择取消原因</div>
          <p class="info-warning">取消可能会产生手续费，请确认</p>
          <div class="close_reason">
            <div
              v-for="(item, index) in close_reason"
              :key="index + item.reason"
              class="_reason_item"
              @click="click_reason_item(item, index)"
              :class="{ click_style: item.show, only_style: item.only_style }"
            >
              {{ item.reason }}
            </div>
          </div>
          <div class="close_button">
            <div class="_button_close" @click="_button_close">取消</div>
            <div class="_button_sure" @click="_button_sure">确定</div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Toast, Popup } from "vant";
import ctrl_c from "/@/assets/img/carOrder/cv.png";
import wait_pay from "/@/assets/img/carOrder/wait_pay.png";
import img_close from "/@/assets/img/carOrder/img_close.png";
import img_wancheng from "/@/assets/img/carOrder/img_wancheng.png";
import yuyue_ok from "/@/assets/img/carOrder/yuyue_ok.png";
import yuyue_wait from "/@/assets/img/carOrder/yuyue_wait.png";
import img_driver from "/@/assets/img/carOrder/img_driver.png";
import car_quit from "/@/assets/img/carOrder/car_quit.png";

// import up from "/@/assets/img/carOrder/car_up.png";
// import down from "/@/assets/img/carOrder/car_down.png";
// import searchPrice from "./components/searchPrice.vue";
export default {
  name: "",
  created() {
    // if (this.$route.query.id) { }
    this.getCarOrderDetail(this.$route.query.id);
  },
  components: {
    // searchPrice
  },
  data() {
    return {
      detail: {},
      show_price: false,
      car_info: {},
      passenger_info: {},
      popup_show: false,
      userConfig: this.$store.state.configureInfo,
      enums: {
        1: "订单预定成功",
        3: "订单取消待支付",
        4: "派单中",
        5: "订单完成待⽀付",
        6: "订单关闭",
        7: "待出发",
        8: "待上⻋",
        9: "⾏程中",
        10: "已退订",
        11: "退订申请中",
        12: "待退款"
      },
      close_reason: [
        { reason: "行程有变，不需要用车了" },
        { reason: "发错订单" },
        { reason: "平台派单太远" },
        { reason: "司机找不到上车位置" },
        { reason: "车辆信息与订单显示不符" },
        { reason: "其他", only_style: true }
      ],
      cancel_reason: "",
      ctrl_c: ctrl_c,
      wait_pay: wait_pay,
      img_close,
      img_wancheng,
      yuyue_ok,
      yuyue_wait,
      car_quit,
      img_driver
    };
  },
  methods: {
    async getCarOrderDetail(id) {
      let url = "/security/car/queryOrderDetail";
      let data = { order_id: id, member_id: localStorage.memberId };
      try {
        const res = await this.$axiosJson(url, data);
        if (res.ret_code == 10000) {
          this.detail = JSON.parse(JSON.stringify(res.data));
          this.car_info = JSON.parse(
            JSON.stringify(res.data.car_info_list[0] || {})
          );
          this.detail.order_id = this.$route.query.id;
          this.passenger_info = JSON.parse(
            JSON.stringify(res.data.passenger_list[0] || {})
          );
        }
      } catch (err) {
        console.log(err);
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.getCarOrderDetail(this.$route.query.id);
    },
    // 查看审批进度
    viewApplyProgress() {
      // const apply_id = state.orderInfo.hotel_order.apply_id;
      // setTimeout(() => {
      //   location.href = `/sdk_apply/#/applyDetail?apply_id=${apply_id}&handle_id&type=1&from=index`;
      // }, 0);
    },
    // 复制订单编号
    CV() {
      copyTxt.value = sourceTxt.innerText; //将文本内容赋值到文本框
      copyTxt.select(); //选择文本框中内容
      document.execCommand("copy"); //调用复制文本方法
      // alert("复制成功");
      Toast.success("复制成功");
    },
    //查看审批进度
    onApproveRight() {
      console.log("查看审批进度");
    },
    // 查看行程动态
    search_travel() {
      this.$router.push({
        path: "/orderMap",
        query: {
          order_id: this.$route.query.id
        }
      });
    },
    // 查看明细
    search_detail() {
      this.show_price = !this.show_price;
    },
    close_search_detail() {
      // this.$emit("update:show", false);
      this.show_price = false;
    },
    // 取消订单
    close_order() {
      this.popup_show = true;
    },
    // 点击 -> 取消原因
    click_reason_item(item, index) {
      this.close_reason.forEach((ooo, num) => {
        ooo.show = false;
      });
      this.close_reason[index].show = !item.show;
      this.cancel_reason = item.reason;
    },
    // 取消 -> 取消原因
    _button_close() {
      this.close_reason.forEach((ooo, num) => {
        ooo.show = false;
      });
      this.cancel_reason = "";
      this.popup_show = false;
    },
    // 确定 -> 取消原因
    async _button_sure() {
      const url = "/security/v1/icardcOrder/cancelOrder";
      const data = {
        order_id: this.$route.query.id,
        cancel_reason: this.cancel_reason
      };
      try {
        const res = await this.$axiosJson(url, data);
        if (res.ret_code == 10000) {
          this._button_close();
          this.getCarOrderDetail(this.$route.query.id);
        }
      } catch (err) {
        console.log(err);
      }
    },

    // 打电话
    call_phone() {
      let num = Number(this.car_info.driver_phone);
      window.location.href = `tel:${num}`;
    },
    // 支付订单
    pay_price() {
      this.$router.push({
        path: "/CarCashier",
        query: {
          order_id: this.$route.query.id
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.detail {
  background: #f6f7f9;
  padding-bottom: 50px;
  .detail_top {
    // color: #fff;
    // background-color: #f0f;
    padding-top: 46px;

    :deep(.van-nav-bar__content) {
      background-color: #3296fa;
      color: #ffffff;
      font-weight: 600;
      .detail_top_title {
        font-size: 16px;
        color: #ffffff;
        font-weight: 600;
      }
      .detail_top_agin {
        font-size: 14px;
        font-weight: 600;
      }
    }
  }
  .detail_detail {
    width: 100%;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    ._detail_left {
      font-size: 14px;
      font-weight: 500;
      color: #999999;
      // border: 1px solid #f0f;
      div {
        margin-top: 12px;
      }
      ._detail_left_div {
        display: flex;
        align-items: center;
        #sourceTxt {
          margin-right: 5px;
        }
        ._detail_left_img {
          width: 15px;
          height: 15px;
          // background-color: #f0f;
        }
        /*隐藏文本框*/
        #copyTxt {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          z-index: -20;
        }
      }
    }
    ._detail_right {
      height: 88px;
      width: 91px;
      // background-color: #f0f;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .detail_card {
    margin: 10px;
    ._card_card {
      background-color: #fff;
      border-radius: 7px;
      .content {
        border-top: 1px solid transparent;
        border-bottom: 1px dashed #f2f2f2;
        position: relative;
        .top {
          display: flex;
          align-items: center;
          padding-left: 15px;
          font-size: 14px;
          margin-top: 15px;
          .top_1 {
            font-size: 12px;
            font-weight: 500;
            color: #717171;
            line-height: 12px;
            padding: 2px 6px;
            border-radius: 2px;
            border: 1px solid #c3c3c3;
            margin-right: 6px;
          }
          .top_2 {
            color: #3a3a3a;
            margin-right: 6px;
            font-weight: 600;
          }
          .top_3 {
            color: #666666;
            font-weight: 600;
          }
        }
        .midle {
          padding: 16px;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          .midle_1 {
            display: flex;
            .midle_1_l {
              width: 9px;
              height: 9px;
              margin-right: 10px;
            }
          }
          .midle_2 {
            display: flex;
            align-items: center;
            .midle_2_l {
              margin-right: 8px;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: #08c183;
              display: flex;
              justify-content: center;
              align-items: center;
              .midle_2_l_c {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #fff;
              }
            }
          }
          .midle_3 {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            .midle_3_l {
              margin-right: 8px;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: #f85544;
              display: flex;
              justify-content: center;
              align-items: center;
              .midle_3_l_c {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #fff;
              }
            }
          }
          .midle_line {
            height: 15px;
            border-left: 1px solid #d8d8d8;
            margin: 1px 0 1px 6px;
          }
        }
        .midle_time_kilometre {
          position: absolute;
          right: 15px;
          bottom: 15px;
          font-size: 13px;
          font-weight: 500;
          color: #666666;
          text-align: right;
          .midle_time_ {
            margin-top: 9px;
          }
        }
      }
      .foot {
        padding: 15px;
        font-size: 13px;
        font-weight: 600;
        color: #3a3a3a;
        .foot_flight {
          display: flex;
          color: #08c183;
          margin-bottom: 15px;
          .foot_flight_l {
            margin-right: 8px;
          }
        }
        .foot_tips {
          height: 53px;
          background: #f9fafb;
          border-radius: 6px;
          padding: 12px 8px;
          display: flex;
          .foot_tips_l {
            width: 32px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            background: rgba(254, 143, 0, 0.06);
            border-radius: 2px;
            border: 1px solid #f5a623;
            font-size: 11px;
            font-weight: 500;
            color: #fe8f00;
            margin-right: 5px;
          }
          .foot_tips_r {
            font-weight: 500;
            font-size: 11px;
            line-height: 15px;
          }
        }
      }
    }
  }
  .detail_approve {
    padding: 0 10px;
    :deep(.van-nav-bar) {
      border-radius: 7px;
    }
  }
  .detail_car_diver {
    padding: 15px;
    background: #ffffff;
    border-radius: 7px;
    height: 71px;
    margin: 10px;
    display: flex;
    align-items: center;
    .detail_car_diver_l {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      // background-color: #0f0;
      img {
        width: 100%;
        height: 100%;
      }
      margin-right: 8px;
    }
    .detail_car_diver_c {
      width: 172px;
      height: 100%;
      font-size: 13px;
      font-weight: 500;
      color: #333333;
      ._diver_c_down {
        margin-top: 7px;
        display: flex;
        align-items: center;
        ._c_down_l {
          background: #edeeee;
          border-radius: 1px;
          border: 1px solid #cdcecf;
          padding: 4px 4px 2px;
          margin-right: 6px;
        }
      }
    }
    .detail_car_diver_r {
      width: 110px;
      height: 31px;
      background: #208cff;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
      line-height: 31px;
      text-align: center;
      cursor: pointer;
    }
  }
  .detail_taker {
    background-color: #fff;
    padding: 15px 15px 6px 15px;
    border-radius: 7px;
    margin: 10px;
    .detail_taker_detail {
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      p {
        margin-bottom: 15px;
      }
      ._taker_detail_p1 {
        font-size: 14px;
        font-weight: 600;
        margin-right: 10px;
      }
      ._taker_detail_p2 {
        font-size: 14px;
        font-weight: 500;
        color: #666666;
      }
    }
    .detail_taker_proj {
      div {
        border-top: 1px solid rgba(242, 242, 242, 0.74);
        margin-bottom: 14px;
        padding-top: 14px;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .right_color {
    color: #636262;
  }
  .detail_linkman {
    background-color: #fff;
    padding: 0 15px 1px;
    border-radius: 7px;
    margin: 0 10px 10px;
    div {
      border-top: 1px solid rgba(242, 242, 242, 0.74);
      margin-bottom: 14px;
      padding-top: 14px;
      font-size: 14px;
      font-weight: 500;
      line-height: 18px;
      display: flex;
      justify-content: space-between;
    }
    ._linkman_1 {
      border-top: none;
      padding-top: none;
    }
  }
  // .detail_payType {}
  .footer_nav {
    background-color: #fff;
    width: 100%;
    height: 50px;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.21);
    div {
      width: 50%;
      text-align: center;
      line-height: 50px;
    }
    .footer_nav_l {
      display: flex;
      align-items: center;
      justify-content: center;
      ._nav_l_symbol {
        font-size: 9px;
        color: #ef6e33;
      }
      ._nav_l_price {
        font-size: 20px;
        font-weight: 600;
        color: #ef6e33;
        margin: 0 5px 0 0;
      }
      ._nav_l_search {
        font-size: 14px;
        font-weight: 500;
        color: #208cff;
        cursor: pointer;
      }
    }
    .footer_nav_r {
      display: flex;
      justify-content: flex-end;
      div {
        width: 50%;
        height: 100%;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
      }
      ._nav_r_order {
        background: #208cff;
        cursor: pointer;
      }
      ._nav_r_call {
        background: #fe8f00;
        cursor: pointer;
      }
    }
  }

  .show_price {
    width: 100%;

    .contents {
      position: relative;
      .contents_title {
        width: 100%;
        height: 54px;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        text-align: center;
        line-height: 54px;
        border-bottom: 1px solid #f2f2f2;
      }
      .contents_price {
        padding: 0 15px;
        font-size: 14px;
        font-weight: 600;
        div {
          padding: 20px 0;
        }
        ._price1_up {
          display: flex;
          justify-content: space-between;
          padding: 0;
          margin-bottom: 9px;
          span {
            font-weight: 600;
            color: #ef6e33;
          }
          ._price1_up_l {
            color: #333333;
            font-weight: 600;
          }
        }
        ._price1_down {
          padding: 0;
          font-size: 13px;
          font-weight: 500;
          color: #999999;
        }
      }

      .contents_price2 {
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
      }
      .contents_show_price {
        background-color: #fff;
        width: 100%;
        height: 50px;
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.21);
        div {
          width: 50%;
          text-align: center;
          line-height: 50px;
        }
        .footer_nav_l {
          display: flex;
          align-items: center;
          justify-content: center;
          ._nav_l_symbol {
            font-size: 9px;
            color: #ef6e33;
          }
          ._nav_l_price {
            font-size: 20px;
            font-weight: 600;
            color: #ef6e33;
            margin: 0 5px 0 0;
          }
          ._nav_l_search {
            font-size: 14px;
            font-weight: 500;
            color: #208cff;
            cursor: pointer;
          }
        }
        .footer_nav_r {
          display: flex;
          justify-content: flex-end;
          div {
            width: 50%;
            height: 100%;
            font-size: 14px;
            font-weight: 600;
            color: #ffffff;
          }
          ._nav_r_order {
            background: #208cff;
            cursor: pointer;
          }
          ._nav_r_call {
            background: #fe8f00;
            cursor: pointer;
          }
        }
      }
    }
  }
  .close_order_contents {
    width: 310px;
    padding: 20px 28px;
    .close_title {
      width: 100%;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      line-height: 16px;
    }
    .close_reason {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 8px;
      ._reason_item {
        background: #f6f6f6;
        border-radius: 4px;
        margin-right: 8px;
        margin-bottom: 8px;
        padding: 7px 8px 6px 10px;
        font-size: 14px;
        font-weight: 500;
        color: #7c7b7b;
        line-height: 14px;
      }
      ._reason_item:nth-child(2n) {
        margin-right: 0;
      }
      :deep(.click_style) {
        background: #e5f2ff;
        color: #208cff;
      }
      :deep(.only_style) {
        padding: 7px 22px 6px 22px;
      }
    }
    .close_button {
      display: flex;
      font-size: 14px;
      font-weight: 500;
      line-height: 14px;
      div {
        width: 116px;
        height: 41px;
        border-radius: 6px;
        line-height: 41px;
        text-align: center;
      }
      ._button_close {
        background: #f5f5f5;
        color: #666666;
        margin-right: 19px;
      }
      ._button_sure {
        background: #208cff;
        color: #ffffff;
      }
    }
  }
}
:deep(.van-empty) {
  padding: 0 !important;
}
.info-warning {
  color: #e6a23c;
  padding: 10px 0;
  line-height: 25px;
  font-size: 14px;
}
</style>
